<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen, projection" />
		<link rel="shortcut icon" href="images/favicon.ico" />
		<title>Ninja Camera Shop</title>
		<meta name="description" content="Do it right - do it hard!" />
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.resizeImg.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(function(){
				$(".item-image-resize").resizeImg({ maxWidth: 60, maxHeight: 60 });
				$(".specific-item-image-resize").resizeImg({ maxWidth: 150, maxHeight: 210 });
				$(".shopping-cart-image-resize").resizeImg({ maxWidth: 34, maxHeight: 34 });
			});
		</script>
	</head>
	<body>
		<div id="background" />
		<div id="main">
			
			<div id="admin-login-wrapper">
				<div class="sidebar">
					<div class="titlebar">
						<h1>Admin login</h1>
					</div>
					<div class="submit-customer">
						<form method="post" action="">
							<fieldset>
								<input name="admin-login" type="text" id="admin-login" value="Username" onfocus="if (this.value == 'Username') {this.value = '';}"
									onblur="if (this.value == '') {this.value = 'Username';}" />
								<input name="password-login" type="text" id="password-login" value="Password" onfocus="if (this.value == 'Password') {this.value = '';} if (this.type == 'text') {this.type = 'password'};" onblur="if (this.value == '') {this.value = 'Password';} if (this.type == 'password' &amp;&amp; this.value == 'Password') {this.type = 'text'};" />
								<input name="login" type="submit" class="submit-button" value="LOGIN" />
							</fieldset>
						</form>
					</div>
				</div>
			</div>
			
			<div id="logo-wrapper">
				<div id="logo">
					<a href="#"><img src="images/logo.png" alt="logo" width="300" height="128px" /></a>
				</div>
			</div>
			
			<div id="left-wrapper">
			
				<div class="content">
					<div class="titlebar">
						<h1>Item list</h1>
					</div>
					<div class="item">
						<div class="item-image"><img src="item-images/missing.jpg" class="item-image-resize" alt="Canon EOS 1100D" /></div>
						<div class="item-title">35 chars max</div>
						<div class="item-stock">1 in stock</div>
						<div class="item-price">&pound; 420</div>
						<div class="item-info">
							<div class="item-info-button"><a href="#">MORE INFO</a></div>
						</div>
					</div>
					<div class="item">
						<div class="item-image"><img src="item-images/canon-eos-600d.jpg" class="item-image-resize" alt="Canon EOS 600D" /></div>
						<div class="item-title">Canon EOS 600D</div>
						<div class="item-stock">3 in stock</div>
						<div class="item-price">&pound; 950</div>
						<div class="item-info">
							<div class="item-info-button"><a href="#">MORE INFO</a></div>
						</div>
					</div>
					<div class="item">
						<div class="item-image"><img src="item-images/canon-ef-14mm.jpg" class="item-image-resize" alt="Canon EF 14mm" /></div>
						<div class="item-title">Canon EF 14mm</div>
						<div class="item-stock">4 in stock</div>
						<div class="item-price">&pound; 2810</div>
						<div class="item-info">
							<div class="item-info-button"><a href="#">MORE INFO</a></div>
						</div>
					</div>
					<div class="item">
						<div class="item-image"><img src="item-images/canon-speedlite-320ex-II.jpg" class="item-image-resize" alt="Canon Speedlite 320EX" /></div>
						<div class="item-title">Canon Speedlite 320EX</div>
						<div class="item-stock">2 in stock</div>
						<div class="item-price">&pound; 250</div>
						<div class="item-info">
							<div class="item-info-button"><a href="#">MORE INFO</a></div>
						</div>
					</div>
					<div class="item">
						<div class="item-image"><img src="item-images/canon-semi-hard-case-eh19-l.jpg" class="item-image-resize" alt="Canon EH19-L case" /></div>
						<div class="item-title">Canon EH19-L case</div>
						<div class="item-stock">5 in stock</div>
						<div class="item-price">&pound; 50</div>
						<div class="item-info">
							<div class="item-info-button"><a href="#">MORE INFO</a></div>
						</div>
					</div>
				</div>
			
				<div class="content">
					<div class="titlebar">
						<h1><a href="#">Item list</a> &raquo; Canon EOS 1100D</h1>
					</div>
					<div class="specific-item">
						<div class="specific-item-image"><img src="item-images/missing.jpg" class="specific-item-image-resize" alt="leopard" /></div>
						<div class="specific-item-description">
Advanced, compact and affordable: your first steps into the world of DSLR photography, made simple with Canon EOS 1100D.
<ul>
	<li>Superior 12-megapixel image quality</li>
	<li>On-screen Feature Guide</li>
	<li>Creative Auto and Basic+</li>
	<li>HD video capture</li>
	<li>ISO 100-6400 sensitivity</li>
	<li>Wide-area 9-point AF system</li>
	<li>63-zone iFCL exposure metering</li>
	<li>6.8cm (2.7”), 230,000-dot screen</li>
	<li>Use with all EF and EF-S lenses</li>
</ul>
						</div>
						<div class="specific-item-wrapper">
							<div class="specific-item-stock">1 in stock</div>
							<div class="specific-item-price">&pound; 420</div>
							<div class="specific-item-add">
								<div class="specific-item-info-button"><a href="#">ADD TO CART</a></div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="content">
					<div class="titlebar">
						<h1>Edit item</h1>
					</div>
					<div id="edit-item">
						<form method="post" action="">
							<fieldset>
								<p>Name:</p>
								<input name="itemName" type="text" id="itemName" value="Canon EOS 1100D" />
								<p>Image URL:</p>
								<input name="itemURL" type="text" id="itemURL" value="item-images/missing.jpg" />
								<p>Item description:
								<br />
								<i>Allowed tags are &lt;ul&gt;, &lt;li&gt;, &lt;b&gt;, &lt;i&gt;, &lt;span&gt;</i>.</p>
								<textarea name="itemDescription" id="itemDescription" rows="15" cols="8">
Advanced, compact and affordable: your first steps into the world of DSLR photography, made simple with Canon EOS 1100D.
<ul>
	<li>Superior 12-megapixel image quality</li>
	<li>On-screen Feature Guide</li>
	<li>Creative Auto and Basic+</li>
	<li>HD video capture</li>
	<li>ISO 100-6400 sensitivity</li>
	<li>Wide-area 9-point AF system</li>
	<li>63-zone iFCL exposure metering</li>
	<li>6.8cm (2.7”), 230,000-dot screen</li>
	<li>Use with all EF and EF-S lenses</li>
</ul>
								</textarea>
								<p>Add stock:</p>
								<input name="itemStock" type="text" id="itemStock" value="1" />
								<p>Price:</p>
								<input name="itemPrice" type="text" id="itemPrice" value="420" />
								<input name="login" type="submit" class="submit-button" value="SUBMIT CHANGES" />
							</fieldset>
						</form>
					</div>
				</div>
				
				<div class="content">
					<div class="titlebar">
						<h1>Error example</h1>
					</div>
					<div id="error">
						<div id="error-image"></div>
						<div id="error-info">404 page not found</div>
					</div>
				</div>
				
				<div class="content">
					<div class="titlebar">
						<h1>Items bought</h1>
					</div>
					<div class="statistic-wrapper">
						<div class="statistic"><b>03-03-2011</b> at <b>20:01</b> -- <b>1</b>x <b>Canon EOS 1100D</b> bought by customer <b>387</b>.</div>
						<div class="statistic"><b>03-03-2011</b> at <b>20:01</b> -- <b>1</b>x <b>Canon EOS 1100D</b> bought by customer <b>387</b>.</div>
						<div class="statistic"><b>03-03-2011</b> at <b>20:01</b> -- <b>1</b>x <b>Canon EOS 1100D</b> bought by customer <b>387</b>.</div>
						<div class="statistic"><b>03-03-2011</b> at <b>20:01</b> -- <b>1</b>x <b>Canon EOS 1100D</b> bought by customer <b>387</b>.</div>
						<div class="statistic"><b>03-03-2011</b> at <b>20:01</b> -- <b>1</b>x <b>Canon EOS 1100D</b> bought by customer <b>387</b>.</div>
						
					</div>
				</div>
				
				<div class="content">
					<div class="titlebar">
						<h1>Chart</h1>
					</div>
					<div class="statistic-wrapper">
						<div id="linechart" style="text-align: center;"></div>
							<script type="text/javascript">
      var queryString = '';
      var dataUrl = '';

      function onLoadCallback() {
        if (dataUrl.length > 0) {
          var query = new google.visualization.Query(dataUrl);
          query.setQuery(queryString);
          query.send(handleQueryResponse);
        } else {
          var dataTable = new google.visualization.DataTable();
          dataTable.addRows(1);

          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.addColumn('number');
          dataTable.setValue(0, 0, 25);
          dataTable.setValue(0, 1, 4);
          dataTable.setValue(0, 2, 8);
          dataTable.setValue(0, 3, 4);
          dataTable.setValue(0, 4, 6);
          dataTable.setValue(0, 5, 4);
          dataTable.setValue(0, 6, 1);
          dataTable.setValue(0, 7, 1);
          dataTable.setValue(0, 8, 1);
          dataTable.setValue(0, 9, 1);
          dataTable.setValue(0, 10, 1);
          dataTable.setValue(0, 11, 1);
          dataTable.setValue(0, 12, 1);
          dataTable.setValue(0, 13, 1);
          dataTable.setValue(0, 14, 1);
          dataTable.setValue(0, 15, 1);
          dataTable.setValue(0, 16, 1);
          dataTable.setValue(0, 17, 1);
          dataTable.setValue(0, 18, 1);
          dataTable.setValue(0, 19, 1);
          dataTable.setValue(0, 20, 1);
          dataTable.setValue(0, 21, 1);
          dataTable.setValue(0, 22, 1);
          dataTable.setValue(0, 23, 1);
          dataTable.setValue(0, 24, 1);

          draw(dataTable);
        }
      }

      function draw(dataTable) {
        var vis = new google.visualization.ImageChart(document.getElementById('linechart'));
        var options = {
          chxl: '',
          chxp: '',
          chxr: '0,0,25',
          chxs: '',
          chxtc: '',
          chxt: 'x',
          chbh: '12,6,2',
          chs: '520x470',
          cht: 'bhg',
          chd: 't:25|4|8|4|6|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1|1',
          chdl: 'Canon EOS 1100D|Canon EOS 600D|Canon EF 14mm|Canon Speedlite 320EX|Canon EH19-L case|Nikon D7000|Nikon D3100|Nikon AF-S NIKKOR 200mm|Nikon SB-900|Nikon COOLPIX P300|Olympus E-620|Olympus E-450|Olympus ZUIKO 300mm|Olympus FL-50R|Olympus XZ-1|Pentax K-R Black|Pentax K-X Olive Green|Pentax SMC DA Star 16-50mm|Pentax AF540FGZ|Pentax Optio I-10 Black|Sony a55|Sony a33|Sony 300mm f/F2.8 G-Series|Sony Flash for all DSLR Cameras|Sony Cyber-shot WX5',
          chdlp: 'l',
          chma: '|220,5'
        };
        vis.draw(dataTable, options);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        draw(response.getDataTable());
      }

      google.load("visualization", "1", {packages:["imagechart"]});
      google.setOnLoadCallback(onLoadCallback);

    					</script>
					</div>
				</div>
				
			</div>

			<div id="right-wrapper">
			
				<div class="sidebar">
					<div class="titlebar">
						<h1>Create customer</h1>
					</div>
					<div class="submit-customer">
						<form method="post" action="">
							<fieldset>
								<input name="customer-create" type="text" id="customer-create" value="Customername" onfocus="if (this.value == 'Customername') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Customername';}" />
								<input name="password-create" type="text" id="password-create" value="Password" onfocus="if (this.value == 'Password') {this.value = '';} if (this.type == 'text') {this.type = 'password'};" onblur="if (this.value == '') {this.value = 'Password';} if (this.type == 'password' &amp;&amp; this.value == 'Password') {this.type = 'text'};" />
								<input name="password-repeat" type="text" id="password-repeat" value="Repeat password" onfocus="if (this.value == 'Repeat password') {this.value = '';} if (this.type == 'text') {this.type = 'password'};" onblur="if (this.value == '') {this.value = 'Repeat password';} if (this.type == 'password' &amp;&amp; this.value == 'Repeat password') {this.type = 'text'};" />
								<input name="create" type="submit" class="submit-button" value="CREATE" />
							</fieldset>
						</form>
					</div>
				</div>
			
				<div class="sidebar">
					<div class="titlebar">
						<h1>Login</h1>
					</div>
					<div class="submit-customer">
						<form method="post" action="">
							<fieldset>
								<input name="customer-login" type="text" id="customer-login" value="Customername" onfocus="if (this.value == 'Customername') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Customername';}" />
								<input name="password-login" type="text" id="password-login" value="Password" onfocus="if (this.value == 'Password') {this.value = '';} if (this.type == 'text') {this.type = 'password'};" onblur="if (this.value == '') {this.value = 'Password';} if (this.type == 'password' &amp;&amp; this.value == 'Password') {this.type = 'text'};" />
								<input name="login" type="submit" class="submit-button" value="LOGIN" />
							</fieldset>
						</form>
					</div>
				</div>
				
				<div class="sidebar">
					<div class="titlebar">
						<h1>Admin info</h1>
					</div>
					<div id="admin-info-wrapper">
						<div id="admin-info-name">Logged in as <b>'15 chars max'</b>.</div>
						<div id="admin-info-logout"><a href="#">[Logout]</a></div>
					</div>
					<div id="admin-menu">
						<p><a href="#">&#8226; Visit frontStore</a></p>
						<p><a href="#">&#8226; Create item</a></p>
						<p><a href="#">&#8226; Shop statistics</a></p>
					</div>
					<div style="height: 15px;"></div>
				</div>
				
				<div class="sidebar">
					<div class="titlebar">
						<h1>Customer info</h1>
					</div>
					<div id="customer-info-wrapper">
						<div id="customer-info-name">Logged in as <b>'15 chars max'</b>.</div>
						<div id="customer-info-logout"><a href="#">[Logout]</a></div>
					</div>
					<div id="customer-history">
						<div class="customer-history-item">
							<div class="customer-history-item-title">1x <a href="#">20 chars max</a></div>
							<div class="customer-history-item-date">02-28-2011</div>
						</div>
						<div class="customer-history-item">
							<div class="customer-history-item-title">1x <a href="#">Canon EOS 1100D</a></div>
							<div class="customer-history-item-date">02-28-2011</div>
						</div>
						<div class="customer-history-item">
							<div class="customer-history-item-title">1x <a href="#">Canon EOS 1100D</a></div>
							<div class="customer-history-item-date">02-28-2011</div>
						</div>
						<div class="customer-history-item">
							<div class="customer-history-item-title">1x <a href="#">Canon EOS 1100D</a></div>
							<div class="customer-history-item-date">02-28-2011</div>
						</div>
						<div class="customer-history-item">
							<div class="customer-history-item-title">1x <a href="#">Canon EOS 1100D</a></div>
							<div class="customer-history-item-date">02-28-2011</div>
						</div>
					</div>
				</div>
				
				<div class="sidebar">
					<div class="titlebar">
						<h1>Shopping cart</h1>
					</div>
					<div class="shopping-cart-item">
						<div class="shopping-cart-image"><img src="item-images/missing.jpg" class="shopping-cart-image-resize" alt="leopard" /></div>
						<div class="shopping-cart-title"><a href="#">20 chars max</a></div>
						<div class="shopping-cart-remove"><a href="#"><img src="images/remove-button.jpg" width="30" height="30" alt="remove" /></a></div>
					</div>
					<div class="shopping-cart-item">
						<div class="shopping-cart-image"><img src="item-images/missing.jpg" class="shopping-cart-image-resize" alt="leopard" /></div>
						<div class="shopping-cart-title"><a href="#">20 chars max</a></div>
						<div class="shopping-cart-remove"><a href="#"><img src="images/remove-button.jpg" width="30" height="30" alt="remove" /></a></div>
					</div>
					<div class="shopping-cart-item">
						<div class="shopping-cart-image"><img src="item-images/missing.jpg" class="shopping-cart-image-resize" alt="leopard" /></div>
						<div class="shopping-cart-title"><a href="#">20 chars max</a></div>
						<div class="shopping-cart-remove"><a href="#"><img src="images/remove-button.jpg" width="30" height="30" alt="remove" /></a></div>
					</div>
					<div id="checkout">
						<div id="checkout-total"><b>&pound; 1257</b> in total</div>
						<div id="checkout-button-wrapper"><div id="checkout-button"><a href="#">CHECKOUT</a></div></div>
					</div>
				</div>
				
				<div class="sidebar">
					<div class="titlebar">
						<h1>Partner shops</h1>
					</div>
					<div class="partner-shop">
						<div class="partner-shop-title"><a href="#">35 chars max &raquo;</a></div>
					</div>
					<div class="partner-shop">
						<div class="partner-shop-title"><a href="#">Ninja Camera Shop &raquo;</a></div>
					</div>
					<div class="partner-shop">
						<div class="partner-shop-title"><a href="#">Ninja Camera Shop &raquo;</a></div>
					</div>
					<div class="partner-shop">
						<div class="partner-shop-title"><a href="#">Ninja Camera Shop &raquo;</a></div>
					</div>
					<div class="partner-shop">
						<div class="partner-shop-title"><a href="#">Ninja Camera Shop &raquo;</a></div>
					</div>
				</div>
				
				<div class="sidebar">
					<div class="titlebar">
						<h1>Visitor info</h1>
					</div>
					<div class="partner-shop">
						<div class="partner-shop-title">Current visitors online: <b>2</b></div>
					</div>
					<div class="partner-shop">
						<div class="partner-shop-title">Record visitors online: <b>2</b></div>
					</div>
				</div>
				
			</div>
		</div>
		<div class="clear" />
	</body>
</html>